import React from "react";
import {Link} from "react-router";
import Loading from "../components/loading";
import Tool from '../components/tool';
import {ModalLose} from './prize-result';
import awardSuccess from '../images/award-success.jpg';
import banner from '../images/banner.jpg';
import Uploader from '../components/uploader';
export default class Award extends React.Component {
    constructor(...props) {
        super(...props);
        this.state = {
            showForm: true,
            loading: false,
            showService: false
        };
    }

    componentDidMount() {
        Tool.setPageTitle('领取奖品');
    }

    onFormSubmit(data) {
        this.setState({loading: true});
        $.ajax({
            url: '/api/prize/exchange',
            data: data,
            type: 'POST',
            dataType: 'json',
            success: ()=> {
                this.setState({loading: false, showForm: false});
            },
            error: (e)=> {
                this.setState({loading: false});
                alert(JSON.parse(e.responseText).errmsg);
            }
        })
    }

    onContact() {
        wx.closeWindow();
        // this.setState({showService: true});
    }

    onServiceClosing() {
        this.setState({showService: false});
        wx.closeWindow();
    }

    render() {
        return (
            <div className="pages site-award has-header">
                <div className="components site-header">
                    <Link to="/exchange-rule">领取流程</Link>
                    <Link to="/award" className="active">立即领取</Link>
                </div>
                {this.state.showForm ? <Form onSubmit={(data)=>this.onFormSubmit(data)}/> :
                    <Success onContact={e=>this.onContact(e)}/>}
                {this.state.loading ? <Loading/> : null}
                {this.state.showService ? <ModalLose title="提示" btnText="确定" onClosing={()=>this.onServiceClosing()}
                                                     text="恭喜您获奖，您可直接在公众号首页点击“客服”咨询领取。"/> : null}
            </div>
        )
    }
}
/**
 * 领奖表单
 */
class Form extends React.Component {
    constructor(...props) {
        super(...props);
        this.state = {
            realname: '',
            phone: '',
            code: '',
            bank: '建设银行',
            img1: '',
            img2: '',
            img3: '',
            showDanger: false,
            showLicense: false
        };
    }

    onInput(name, value) {
        console.log(name, value);
        this.setState({[name]: value});
    }

    onSubmit(e) {
        e.preventDefault();
        // if (!this.state.img1) {
        //     alert('请上传身份证正面');
        //     return;
        // }
        // if(!this.state.img3){
        //     alert('请上传银行卡正面');
        //     return;
        // }
        this.props.onSubmit(this.state);
    }

    render() {
        return (
            <form className="form" onSubmit={e=>this.onSubmit(e)}>
                <img src={banner} className="banner" alt=""/>
                <div className="form-group">
                    <label htmlFor="realname" className="label">姓名<span className="important">*</span></label>
                    <input type="text" className="input" value={this.state.realname} id="realname"
                           onChange={e=>this.onInput('realname', e.target.value)} placeholder="请输入您的真实姓名" required={true}/>
                </div>
                <div className="form-group">
                    <label htmlFor="phone" className="label">手机号码<span className="important">*</span></label>
                    <input type="tel" className="input" value={this.state.phone} id="phone"
                           onChange={e=>this.onInput('phone', e.target.value)} placeholder="请输入您的真实联系方式便于后续领奖" required={true}/>
                </div>
                <div className="form-group">
                    <label htmlFor="code" className="label">验证码<span className="important">*</span></label>
                    <input type="tel" className="input" value={this.state.code} id="code"
                           onChange={e=>this.onInput('code', e.target.value)} placeholder="请输入您摇到奖品的验证码" required={true}/>
                </div>
               {/* <div className="form-group">
                    <label htmlFor="bank" className="label">银行<span className="important">*</span></label>
                    <select name="bank" className="input selector" id="bank" onChange={e=>this.onInput('bank', e.target.value)}>
                        {this.props.bankOptions.map((item, index)=> {
                            return (<option value={item} key={index}>{item}</option>)
                        })}
                    </select>
                    <div className="selector-tips danger">需要开通U盾</div>
                </div>
                <div className="form-group">
                    <Uploader onUploaded={(url)=>this.onInput('img1', url)} btnText="上传身份证正面"/>
                    {this.state.img1 ?
                        <img style={{marginTop: 8}} src={this.state.img1} className="banner" alt=""/> : null}
                </div>
                <div className="form-group">
                    <Uploader onUploaded={url=>this.setState({img3: url})} btnText="上传银行卡正面"/>
                    {this.state.img3 ?
                        <img style={{marginTop: 8}} src={this.state.img3} className="banner" alt=""/> : null}
                </div>*/}
                <div className="form-group">
                    <div className="actions">
                        <div onClick={e=>this.setState({showDanger: true})}>风险提示书</div>
                        <div onClick={e=>this.setState({showLicense: true})}>入市协议书</div>
                    </div>
                </div>
                <div className="form-group">
                    <button type="submit" className="btn-agree">同意以上协议并开户</button>
                </div>
                <div className="license" style={{display: this.state.showDanger ? 'block' : 'none'}}>
                    <h2>郑文远洋恒利邮币卡中心交易风险提示书</h2>
                    <p className="no-intent">尊敬的投资人：</p>
                    <p>欢迎您参加郑文远洋恒利邮币卡中心商品实物交易！为了让您充分了解交易风险，根据《商品线上交易规则》(暂行)等相关规定，特提供本风险提示书。若您选择参与本中心商品实物交易，则视为您已仔细阅读前述规定以及本风险提示书并自愿承担商品实物交易带来的风险。</p>
                    <p>鉴于投资人进行商品交易存在风险并可能导致投资人亏损>鉴于投资人进行商品交易存在风险并可能导致投资人亏损，请您慎重考虑自身情况是否适合进行此类交易，并确定可以自行承担风险及亏损，同时客观理性地认识到商品交易的风险包括但不限于：</p>
                    <p>一、宏观经济风险：由于我国宏观经济形势的变化以及商品艺术品价值取向的变化，存在可能影响商品价格上下波动的情形；国际宏观经济形势变化也会对商品交易市场产生影响，存在导致商品交易价格上下波动的情形。</p>
                    <p>二、政策法规及市场风险：商品交易作为一种创新的实物交易模式，自身的交易规则还需要在实践中不断完善，国家法律、法规及政策的变化以及影响价格波动的其他因素出现，都可能影响商品交易价格；或者由于本中心根据国家法律、法规及政策变化等原因而对本中心相关规则进行修订，可能影响交易主体资格、交易规则等各个方面的变化。上述法律法规、政策及本中心规则的风险，均可能导致本中心交易的商品价格异常波动。</p>
                    <p>三、鉴定评估风险：由于国内目前尚没有权威的鉴定评估机构和统一的鉴定估值程序及完备的鉴定估值方法，商品鉴定估值意见书仅供投资者参考，不作为投资人主张其他权益的依据。</p>
                    <p> 四、技术风险：由于交易的进行、信息的显示及资金的划付均是运用电子通讯技术和电脑技术并通过互联网传输来实现的，这些技术存在被网络黑客和计算机病毒攻击的可能，或者通讯技术、电脑技术和相关软件具有存在缺陷的可能，互联网传输故障也可能造成您的交易指令无法及时传输，这些风险均可导致您的交易申报无法成交或者无法全部成交，或者转账资金不能及时到账、交易延迟、中止甚至无法完成交易等。</p>
                    <p>五、不可抗力风险：诸如地震、台风、火灾、水灾、战争、瘟疫、社会动乱等不可抗力因素可能导致商品交易系统的瘫痪；本中心无法控制和不可预测的系统故障、设备故障、通讯故障、电力故障等也可能导致商品交易系统非正常运行甚至瘫痪；银行无法控制和不可预测的系统故障、设备故障、通讯故障、电力故障等也可能导致资金转账系统非正常运行甚至瘫痪，这些风险可能导致您的交易申报无法成交或者无法全部成交，或者转账资金不能及时到账等。</p>
                    <p>六、账号密码泄露风险：由于投资人会员使用计算机被病毒侵入、黑客攻击等导致的密码泄露、账号泄露或投资人的身份被冒用，可能导致无法正确下达申报指令、恶意虚假申报或申报失败、延迟、错误等。</p>
                    <p>七、投资人会员软硬件系统风险：投资人的电脑设备及软件系统与所提供的网上交易系统不相匹配，导致无法下达申报指令或申报失败、延迟等。</p>
                    <p>八、其他风险：密码失密、操作不当、投资决策失误的等原因可能会使投资人会员发生亏损；网上申报、热键操作完毕后未及时退出，他人进行恶意操作而造成的损失；网上交易未及时退出还可能导致遭遇黑客攻击，从而造成损失。</p>
                    <p>上述风险都将可能会导致投资人发生亏损，该等亏损均由投资人自行承担。在投资人参与商品交易时，他人给予的保证获利或不会发生亏损的任何承诺都是没有根据的，类似的承诺不会减少发生亏损的可能。</p>
                    <p>本《风险提示书》提示事项仅为列举，并不能详细列明从事商品交易的全部风险和可能影响商品市场异常波动的所有情形，其他不可预见的风险因素也可能会给投资人带来损失。投资人在进行商品交易前，应确保自己已经做好足够的风险评估和财务安排，避免因参与交易而遭受难以承受的损失。</p>
                    <p>特别提示：本中心敬告投资人，应当根据自身的经济条件和心理承受能力认真制定交易策略，尤其是投资人决定购买有较大潜在风险的品种时，更应当清醒地认识到该类实物藏品蕴含的风险。</p>

                    <p>商品网上实物交易是一种创新的交易模式。投资人在进行交易时存在盈利的可能，也存在亏损的风险。在投资人参与商品实物交易时，我们郑重地提醒投资人，认真阅读并谨记以下劝导：<br />
                    1、 请合理配置个人资产，不要以个人全部资产投入商品交易市场。<br />
                    2、 请理性管理个人财富，不要拿生活必须资金、自用住房抵押贷款或其他借款投入商品市场。<br />
                    3、 请客观评估自己投资抗风险能力，选择恰当的投资品种。<br />
                    4、 请正确运用投资策略，留有适当资金以备不时之需。<br />
                    5、 请认真了解所投资的藏品，不能仅凭市场传言盲目操作。<br />
                    6、 请认真了解并掌握商品投资所需的必要知识和相关法规，提高自我保护的能力。
                    </p> 
                    <p>本中心没有授权任何个人或组织进行商品委托投资理财业务，为保护投资人的合法权益，请不要与任何人签订商品交易委托代理协议，否则由此引起的一切后果将由投资人承担。</p>
                    <p>本中心郑重提醒投资人，商品投资是一种风险投资，请分清投资与投机、风险和收益之间的关系，树立正确的投资理念，谨慎入市，理性操作，注意身心健康与资金安全。</p>
                    <p>本风险提示书并不能提示从事商品交易的全部风险及商品市场的全部情形。投资人务必对此有清醒的认识。</p>
                    <p>“投资有风险，入市须谨慎”。请切记风险！</p>
                    <div className="btn-agree-license" onClick={e=>this.setState({showDanger: false})}>同意</div>
                </div>
                <div className="license" style={{display: this.state.showLicense ? 'block' : 'none'}}>
                    <h2>投资者入市协议</h2> 
                    <p className="no-intent">甲方：</p>
                    <p className="no-intent">乙方：河南省远洋恒利艺术品管理有限公司</p>
                    <p>根据《中华人民共和国合同法》、《中华人民共和国电子签名法》《计算机系统安全保护条例》及《第三方电子商务交易平台服务规范》等相关法律法规，为明确甲乙双方的责任，维护有关各方的合法权益，控制中心风险，甲乙双方根据山东恒利商品交易中心《交易规则（试行）》及其相关文件和规定，遵循平等、自愿、互惠的原则，达成如下协议：</p>
                    <p>1、服务内容：</p>
                    <p>1.1 甲方根据《交易规则》（试行）及相关规定，按照规定申请成为乙方商品交易中心的投资收藏者，享有乙方为商品交易中心投资收藏会员提供的所有服务，并可在乙方的交易平台上进行商品的投资、交易。</p>
                    <p>1.2 甲方所能享受的服务参照乙方商品交易中心交易规则、会员管理制度等相关文件确定。</p>
                    <p>1.3 乙方有权根据业务发展需要，调整对投资收藏者的服务专案及内容并公示。</p>
                    <p>2.甲方权利与义务：</p>
                    <p>2.1甲方权利</p>
                    <p>（1）甲方自愿成为乙方的投资收藏会员，并可以自主在乙方商品交易平台上进行投资、交易。</p>
                    <p>（2）甲方有权注销自己的乙方投资收藏会员资格。</p>
                    <p>(3）甲方有权对乙方的服务提出建议或意见。</p>
                    <p>（4）甲方有权对乙方作出的决定提出异议。</p>
                    <p>2.2甲方义务</p>
                    <p>（1）甲方保证已阅读《交易规则》（试行），并且符合该标准要求，其自身不存在任何法律、法规、乙方交易规则、管理制度所规定的禁止或限制其成为乙方投资收藏会员及禁止或限制其从事投资、交易的情形。</p>
                    <p>（2）甲方保证已阅读乙方的交易规则、管理制度及其他相关文件，知晓交易方法并同意遵守该等文件。甲方已阅读并理解《交易风险提示书》，知晓交易风险并自愿承担交易风险。</p>
                    <p>（3）甲方保证提交给乙方的所有资料均真实、合法、完整。因所提交资料的瑕疵或不实而产生的一切法律责任，由甲方承担。</p>
                    <p>（4）甲方保证其在乙方平台上投资资金的来源合法。</p>
                    <p>（5）甲方必须妥善保管其在乙方交易平台上的帐号、密码、手机号码、邮箱、证件号码等个人资讯，因泄露、保管不善使上述个人资讯泄露而导致的风险及损失由甲方承担。</p>
                    <p>（6）甲方须到乙方指定的官方网站登录下载交易客户端软件，不得通过其它链接进行登录下载。因甲方通过其它网站提供的链接登录注册、登录下载交易客户端软件而产生的一切风险及责任，由甲方承担。</p>
                    <p>（7）对于通过甲方帐户发出的交易指令，全部视为甲方发出有效指令，甲方承诺对上述交易指令承担全部责任。</p>
                    <p>（8）甲方应遵守乙方的相关规则和收费标准，乙方对相关规则和收费标准进行调整时将及时公告，因甲方未注意公告内容而产生的失误由甲方承担。</p>
                    <p>（9）甲方在申请成为乙方投资收藏会员时所提交的资料等注册资讯如有更改，应按照乙方规定，及时通知乙方。</p>
                    <p>（10）乙方可根据业务发展的需要，对提供给甲方的服务内容进行增加、调整或终止，并自行判断是否须甲方办理确认手续，甲方对此无异议，并配合完成。</p>
                    <p>（11）甲方应按照乙方交易规则进行交易，自觉维护乙方声誉。</p>
                    <p>（12）因乙方的系统出现故障、错账等原因而导致甲方获得不当得利，甲方应积极配合退还不当得利及其利息；反之，乙方有权向甲方追讨不当得利及其利息，直至暂停对甲方提供的服务。</p>
                    <p>（13）甲方须按照乙方规定缴纳交易手续费及其它相关费用，交易过程中所产生的税赋，本中心一律不代收代扣，由投资收藏者自行负责缴纳。。</p>
                    <p>（14）2.2.14甲方已经认真阅读本协议，并自愿遵守本协议条款。</p>
                    <p>3.乙方权利与义务：</p>
                    <p>3.1乙方权利</p>
                    <p>（1）乙方有权作出是否同意甲方申请的决定。</p>
                    <p>（2）乙方根据发展需要或政府的有关要求，对所提供的服务内容、收费标准、投资收藏者管理制度、交易规则等规定进行适时调整，包括对官方网站及交易客户端软件进行升级和优化。上述资讯在官方网站或交易客户端进行公告即发生效力。</p>
                    <p>（3）发生下列情形时，乙方可冻结甲方帐户，并有权根据实际情况作出终止甲方投资收藏者资格、移交司法部门等决定，以保障各方的合法权利。</p>
                    <p>a、甲方提交的资料存在虚假、重大遗漏或重大隐瞒；</p>
                    <p>b、甲方利用乙方的交易平台从事非法活动。</p>
                    <p>c、甲方在乙方交易平台上的交易资金来源非法。</p>
                    <p>d、甲方诋毁乙方声誉，或恶意攻击乙方网站、交易客户端软件等；</p>
                    <p>e、甲方不按照乙方的规定，恶意操作，损害或威胁乙方及其他人的合法权益的。</p>
                    <p>f、其它违反法律、法规、乙方交易制度、管理制度，以及对乙方或其他人的合法权益造成损害的行为。</p>
                    <p>（4）对于通过甲方帐户发出的交易指令，全部视为有效指令。乙方按照上述交易指令行事，产生的一切结果均由甲方承担。</p>
                    <p>（5）3.1.5乙方因下列行为未能及时、正确的执行甲方的交易指令时，乙方不承担任何责任：</p>
                    <p>a、任何原因造成的甲方交易指令资讯不明、不完整等情况。</p>
                    <p>b、甲方帐户存在被冻结、被扣划等强制措施。</p>
                    <p>c、甲方帐户资金不足，或交易资金来源非法。</p>
                    <p>d、甲方的交易指令出于任何非法目的。</p>
                    <p>e、甲方未按照乙方规定正确操作。</p>
                    <p>f、不可抗力、网络攻击或病毒攻击、系统故障、通讯设施故障、电力设施故障或其它不可归责于乙方的情形。</p>
                    <p>（6）因甲方所投资的交易产品本身的任何问题而导致的甲方风险和损失，乙方不承担任何责任。</p>
                    <p>（7）甲方取得商品权益时，即视为同意授权乙方作为代理人，代为选定交易标的物的保管机构及保险机构，代为办理商品的保管、保险事宜。</p>
                    <p>3.2乙方义务</p>
                    <p>（1）在条件相同时，乙方须平等地为每一位投资收藏者提供服务。</p>
                    <p>（2）在交易系统及甲方交易指令均不存在异常时，乙方应准确、及时地执行甲方的交易指令。</p>
                    <p>（3）对于甲方提出的与甲方投资者服务相关的咨询，乙方应认真、及时地作出解答。</p>
                    <p>（4）乙方应认真维护官方网站和交易客户端的安全及稳定运行。</p>
                    <p>（5） 乙方可在法律许可、监管部门要求或甲方同意的范围内使用甲方资料及帐户交易记录。乙方须对甲方的资料和帐户交易记录尽保密义务，但法律另有规定或监管部门另有要求的除外。</p>
                    <p>4.纠纷解决条款：</p>
                    <p>4.1 本协议适用中华人民共和国相关法律。</p>
                    <p>4.2 协议中未尽事宜，参照相关法律、乙方业务规定或业内通行的惯例解决。</p>
                    <p>4.3 如因执行本协议发生纠纷，双方应进行协商。协商不成的，可向乙方所在地人民法院提起诉讼。</p>
                    <p>5.协议的变更或终止：</p>
                    <p>5.1 乙方通过官方网站或其它途径发布的与本协议相关的公告，为本协议不可分割的一部分。如公告与本协议有冲突之处，以公告内容为准。</p>
                    <p>5.2 因甲方申请乙方撤销或其它原因导致的甲方投资收藏者资格被注销后，本协议自行终止。</p>
                    <p>5.3 在甲方违法、不正当操作或者存在其它违反法律、法规、本协议或乙方相关业务规定的情况下，乙方可单方面中止或终止本协议。在本协议中止或终止时，甲方之前发出的交易指令仍然有效，其交易指令行事的后果由甲方承担。</p>
                    <p>5.4 本协议任何条款因任何原因被确认无效时，均不影响其它条款的效力。</p>
                    <p>5.5 甲方应认真阅读本协议,甲方自愿接受本协议约束。</p>
                    <p>5.6 甲方启动其实名投资收藏者账户时，该协议即生效。 </p>
                    
                    <div className="btn-agree-license" onClick={e=>this.setState({showLicense: false})}>同意</div>
                </div>
            </form>
        )
    }
}
Form.propTypes = {
    onSubmit: React.PropTypes.func.isRequired,
    bankOptions: React.PropTypes.array
};
Form.defaultProps = {
    bankOptions: ['建设银行', '其他银行']
};
class Success extends React.Component {
    render() {
        return (
            <div className="success">
                <div className="container">
                    <h1>恭喜您！</h1>
                    <img src={awardSuccess} className="banner" alt=""/>
                    <div className="message">您已开户成功， 客服人员将于24小时内联系您，请确保您填写的电话畅通。您可直接在微信页面联系客服。</div>
                    <div className="btn-award" onClick={this.props.onContact}>联系客服</div>
                </div>
            </div>
        )
    }
}
Success.propTypes = {
    onContact: React.PropTypes.func.isRequired
};